.switch{
    font-size: 36px;
    /* 该样式内部的所有元素大小单位统一使用 em 单位 */
    cursor: pointer;
    user-select: none;
}
.text{
    transition:all 150ms ease;
    vertical-align: middle;
}
.text.active{
    color: #409eff;
}
.pot{
    display: inline-block;
    width: 3em;
    height: 1.5em;
    background-color: #dcdfe6;
    vertical-align: middle;
    margin: 0px 0.4em;
    border-radius:3em;
    transition:all 150ms ease;
    box-shadow: 0 0 0.2em #b1b1b1 inset;
}
.pot i{
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-color: white;
    border-radius: 50%;
    transform: scale(0.8);
    transition:all 150ms ease-out;
    box-shadow: 0 0 0.2em #b1b1b1;
}
.event{
    display: none;
}
.event:checked + .pot{
    background-color: #409eff;
    box-shadow: 0 0 0.2em #2f75bb inset;
}
.event:checked + .pot i{
    transform: translate(100%,0) scale(0.8);
    box-shadow: 0 0 0.2em #2f75bb;
}